<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增商品</title>
    <script src="js/jquery-3.6.3.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <script src="js/bootstrap.js"></script>
    <script>
        $(function (){

            let goodsId = null

            $("#btnNew").click(
                function (){
                    $.ajax({
                            url: "/goods/newGoods",
                            type: "post",
                            data: JSON.stringify({
                                "name": $("#name").val(),
                                "price": $("#price").val()*100,
                                "intro": $("#intro").val(),
                                "count": $("#count").val()
                            }),
                            contentType: "application/json",
                            dataType: "json",
                            success: function (data) {
                                let r = data;
                                if (r.code === 1) {
                                    goodsId = r.data
                                    $(".photoBox").show()
                                    alert("添加成功，请为该商品添加图片")
                                    $("#img").removeAttr("src")
                                } else {
                                    alert(r.msg)
                                }
                            }
                        }
                    )
                }
            )

            $("#btnUpload").click(
                function (){
                    if(goodsId==null){
                        alert("无商品")
                        return
                    }
                    if(document.getElementById("photo").files[0].size>1024*1024*3){
                        alert("图片不能超过3m！")
                        return;
                    }
                    let form = new FormData();
                    form.append("file", document.getElementById("photo").files[0]);
                    form.append("id", goodsId);
                    $.ajax({
                            url: "/goods/upLoadPhoto",
                            type: "post",
                            data: form,
                            processData: false,
                            contentType: false,
                            dataType: "json",
                            success: function (data) {
                                let r = data;
                                if (r.code === 1) {
                                    $("#img").attr("src", "/photo/"+r.data)
                                    alert("图片上传成功")
                                    $("#photo").val(null)
                                    $("#name").val(null)
                                    $("#price").val(null)
                                    $("#intro").val(null)
                                    $("#count").val(null)
                                } else {
                                    alert(r.msg)
                                }
                            }
                        }
                    )
                }
            )
            $("input").attr("autocomplete", "off")
        })
    </script>
</head>
<body>
    <div class="table-responsive">
        <div class="page-header">
            <h3>
                新商品
            </h3>
        </div>
        <table class="table table-bordered table-striped">
            <tr>
                <th>商品名</th>
                <td>
                    <input id="name" type="text">
                </td>
            </tr>
            <tr>
                <th>价格（元）</th>
                <td>
                    <input id="price" type="number">
                </td>
            </tr>
            <tr>
                <th>介绍</th>
                <td>
                    <input id="intro" type="text">
                </td>
            </tr>
            <tr>
                <th>库存</th>
                <td>
                    <input id="count" type="number">
                </td>
            </tr>
            <tr class="photoBox" hidden>
                <th>
                    <input id="photo" type="file" accept="image/*">
                </th>
                <td>
                    <button id="btnUpload">上传</button>
                </td>
            </tr>
            <tr class="photoBox" hidden>
                <th>图片</th>
                <td>
                    <img id="img" src="" width="200" height="200">
                </td>
            </tr>
        </table>
        <button id="btnNew" class="btn-primary btn-lg">提交</button>
    </div>
</body>
</html>